    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Video</title>
        <link rel="stylesheet" href="font/iconfont.css">
        <script src="jquery/jquery.js"></script>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            .box{
                position: relative;
                width: 600px;
                height: 960px;
                margin: 100px auto;
                background-color:  #000;
                text-align: center;
            }
            .controller{
                position: absolute;
                width: 500px;
                height: 60px;
                left: 50px;
                bottom: 20px;
                border: 1px solid #000;
                background-color: #0AB6C3;
                opacity: 0.4;
                border-radius: 30px;
            }
            .box video{
                display: inline-block;
            }
            .switch{
                /*height: 50px;*/
                /*width: 50px;*/
                position: absolute;
                /*border: 1px solid #000;*/
                /*background: #cccccc;*/
                left: 20px;
                top: 12px;
                font-size: 36px;
                color: #000000;
            }
            .controllerBar{
                position: absolute;
                left: 70px;
                top: 25px;
                width: 350px;
                height: 10px;
                border: 1px solid #000;
            }
            .currentTime{
                position: absolute;
                left: 0;
                top: 0;
                width: 0%;
                height: 10px;
                background: #ff16d2;
            }
            .timeLength{
                position: absolute;
                right: 185px;
                top: 0px;
            }
            .zoom{
                position: absolute;
                right: 20px;
                top: 14px;
                color: #000000;
                font-size: 30px;
            }
        </style>
    </head>
    <body>
    <div class="box">
        <video src="video/luoyonghao.mp4"></video>
        <div class="controller">
            <span class=" iconfont icon-play switch"></span>
            <div class="controllerBar">
                <div class="currentTime"></div>
            </div>
            <div class="timeLength">
                <span>00:00:00</span>/<span>00:00:00</span>
            </div>
            <div class="zoom iconfont icon-quanping"></div>
        </div>
    </div>
        <script>
            var playBtn=document.querySelector('.switch')
            var video=document.querySelector('video')
            var controller=document.querySelector('.controller')
            var span=controller.children[0];
            var currentTime1=document.querySelector('.currentTime')
            var timeLength=document.querySelector('.timeLength')
            var span1=timeLength.children[0];
            var span2=timeLength.children[1];
            var fulltime=0;
            var rate1=0;
            var currentT=0;
            console.log(span)
            playBtn.onclick=function () {
                // alert('111');
                // video.play();
                // span.removeClass('icon-play')
                //     span.addClass('icon-Pause')
                if (video.paused){
                    video.play();
                    this.classList.remove('icon-play')
                    this.classList.add('icon-Pause')
                }else{
                    video.pause();
                    this.classList.remove('icon-Pause')
                    this.classList.add('icon-play')
                }
            }
            // https://blog.csdn.net/weixin_43675447/article/details/90695733
            //全屏事件
            var zoom=document.querySelector('.zoom');
            zoom.onclick=function () {
                if (video.webkitRequestFullScreen) {
                    video.webkitRequestFullScreen();
                }
                else if (video.mozRequestFullScreen) {
                    video.mozRequestFullScreen();
                }
                else if (video.msRequestFullScreen) {
                    video.msRequestFullScreen();
                }
                else if (video.RequestFullScreen) {
                    video.RequestFullScreen();
                }

            }
            //进度条显示
            // 视频总时长
            video.onplaying=function () {
                fulltime=this.duration;
                console.log("fulltime----"+fulltime)
                var hour1=Math.floor(fulltime/3600);
                console.log("hour1----"+hour1)
                var minu1=Math.floor(fulltime%3600/60);
                console.log("minu1----"+minu1)
                var secon1=Math.floor(fulltime%3600%60);
                console.log("secon1----"+secon1);

                hour1=hour1>10?hour1:"0"+hour1
                minu1=minu1>10?minu1:"0"+minu1
                secon1=secon1>10?secon1:"0"+secon1
                span1.innerHTML=hour1+":"+minu1+":"+secon1;
            }
            video.ontimeupdate=function () {
                currentT=this.currentTime;
                rate1=currentT/fulltime;
                console.log("rate1---"+parseInt(rate1*100)+"%")
                currentTime1.style.width=rate1*100+"%"
                var hour1=Math.floor(currentT/3600);
                console.log("hour1----"+hour1)
                var minu1=Math.floor(currentT%3600/60);
                console.log("minu1----"+minu1)
                var secon1=Math.floor(currentT%3600%60);
                console.log("secon1----"+secon1);


                hour1=hour1>10?hour1:"0"+hour1
                minu1=minu1>10?minu1:"0"+minu1
                secon1=secon1>10?secon1:"0"+secon1
                span2.innerHTML=hour1+":"+minu1+":"+secon1;
            }



        </script>
    </body>
    </html>